<!DOCTYPE html5>
<html>
    {include file="public/header"}

    <body>
        <div class="wrapper">
            {include file="public/nav"}  
            <div id="page-wrapper" style="min-height: 325px;">
                <div class="row">
	                <div class="col-lg-12">
	                    <h1 class="page-header">例子</h1>
	                </div>
                </div>
                <div class="row">
                    <div style="position:relative;height:40px;" id="b">
                        <div style="width:100%;height:10px;background:#666666;border:1px solid #cccccc;margin-top:10px">
                            
                            <div id="a" style="width:10px;height:30;background-color:#cccccc;cursor:pointer;position:absolute;top:-6px;left:0">
                                <div id="c">1</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript">
         var a = document.getElementById('a');
         var b = document.getElementById('b');
         var c = document.getElementById('c');
         a.addEventListener('mousedown',function(e){
             console.log(e);
             x = e.x;
             y = e.y;
             xoffset = e.offsetX;
             yoffset = e.offsetY;             
             b.addEventListener('mousemove',function(e){
                 bx = e.x;
                 by = e.y;
                 _xoffset = bx-x;
                 _yoffset = by-y;
                 a.style.left = _xoffset;

             });             
         });

        </script>
    </body>
</html>
